<template>
  <div class="login">
    <div class="form">
      <div class="title">
        <span>管理员登录</span>
      </div>
      <div class="opt">
        <div class="label">
          <el-icon :size="21"><User /></el-icon>
        </div>
        <div class="inpbox">
          <input
            type="text"
            v-model="user.account"
            placeholder="请输入账号/邮箱"
          />
        </div>
      </div>
      <div class="opt">
        <div class="label">
          <el-icon :size="21"><Lock /></el-icon>
        </div>
        <div class="inpbox">
          <input
            type="password"
            v-model="user.password"
            placeholder="请输入密码"
          />
        </div>
      </div>
      <div class="opt">
        <div class="label">
          <el-icon :size="21"><Picture /></el-icon>
        </div>
        <div class="inpbox">
          <input
            type="text"
            v-model="user.captcha"
            placeholder="请输入验证码"
          />
        </div>
        <div class="vcode" @click="getVerify">
          <canvas ref="canvas"></canvas>
        </div>
      </div>
      <div class="opt">
        <router-link to="/findpwd">忘记密码?</router-link>
      </div>
      <div class="opt">
        <div class="btnBox">
          <button class="btn" @click="singinFn">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import '../common/scss/variable.scss';
.login {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: skyblue;
  background-image: url(../common/img/R-C.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  .form {
    width: 450px;
    border: 1px solid #f0f0f0;
    padding: 15px 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
    .title {
      text-align: center;
      padding: 20px 0;
      span {
        display: inline-block;
        border-bottom: 2px solid $borderColor;
        padding: 10px 10px;
        color: $activeColor;
      }
    }
    .opt {
      width: 100%;
      display: flex;
      height: 42px;
      margin-bottom: 10px;
      // 禁止选中
      user-select: none;
      .label {
        width: 50px;
        height: 40px;
        // background-color: #f0f5ff;
        border: 1px solid #ccc;
        border-right: 0;
        flex-shrink: 0;
        // text-align: center;
        line-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .inpbox {
        width: calc(100% - 50px);
        input {
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          display: block;
          border: 1px solid #ccc;
          width: 100%;
          padding-left: 10px;
        }
      }

      a {
        color: #666666;
        font-size: 14px;
        box-sizing: border-box;
        padding: 0px 0px 0px 5px;
      }
      .btnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        .btn {
          width: 80%;
          height: 40px;
          background-color: $bgColor;
          font-size: 16px;
          border-radius: 10px;
          color: #fff;
          cursor: pointer;
        }
      }
      canvas {
        cursor: pointer;
        margin-left: 10px;
        background-color: white;
        // border: 1px solid #000000;
      }
    }
  }
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import api from '../api/index'
import { singin, test } from '../api/request'
import { useRouter } from 'vue-router'

// 定义变量 记录程序所需的数据
let canvas = ref<Element>()
let pen: any
let w: number = 100
let h: number = 40
let host: string = api.url
// 记录表单信息
type U = {
  account: string
  password: string
  captcha: string
}
let user = ref<U>({
  account: '',
  password: '',
  captcha: '',
})

const $router = useRouter()
const singinFn = async () => {
  let { account, password, captcha } = user.value
  if (account && password && captcha) {
    let isShow
    await test({ captcha }).then(content => {
      if (content.code == 200) {
        isShow = true
      } else {
        ElMessage({
          type: 'error',
          message: content.msg,
        })
      }
    })

    if (isShow) {
      await singin({ account, password, role: 1 }).then(content => {
        let { code, msg } = content
        //  console.log(content);
        if (code == 200) {
          let { nickName, token } = content
          localStorage.setItem('NICK_NAME', nickName)
          localStorage.setItem('TOKEN', token)
          ElMessage({
            type: 'success',
            message: content.msg,
          })

          setTimeout(() => {
            $router.replace({ path: '/' })
          }, 150)
        } else {
          ElMessage({
            type: 'error',
            message: content.msg,
          })
        }
      })
    }
  } else {
    ElMessage({
      type: 'error',
      message: '输入框不能为空',
    })
  }
}

// 初始化
onMounted(() => {
  let ele = canvas.value
  let img = new Image()
  img.src = `${host}/api/verify/captcha`
  if (ele) {
    ele.width = w
    ele.height = h
    pen = ele.getContext('2d')
    img.onload = () => {
      pen.drawImage(img, 0, 0, w, h)
    }
  }
})

// 点击获取验证码
const getVerify = () => {
  let img = new Image()
  img.src = `${host}/api/verify/captcha?${Math.random()}`
  pen.clearRect(0, 0, w, h)
  img.onload = () => {
    pen.drawImage(img, 0, 0, w, h)
  }
}
</script>
